const range = size =>
  new Array(size).fill(1).reduce(
    (cur, next, index) => ({
      ...cur,
      [`${index}_${size}`]: `${(index / size) * 100}%`
    }),
    {}
  )
const generateSpacing = num => {
  return new Array(num + 1)
    .fill(1)
    .reduce((cur, next, index) => ({...cur, [index]: `${index * 2}rpx`}), {})
}
const generateRotate = () => {
  return new Array(361)
    .fill(1)
    .reduce((cur, next, index) => ({...cur, [index]: `${index}deg`}), {})
}
// eslint-disable-next-line
module.exports = {
  prefixer: false,
  separator: '_',
  compile: false,
  globalUtility: false,
  darkMode: 'media',
  important: true,
  corePlugins: {
    preflight: false, //基于 modern-normalize , Preflight 是一套针对 Tailwind 项目的基础样式，旨在消除跨浏览器的不一致性，并使您的工作更轻松地符合设计系统的约束。
    space: false,
    divideStyle: false,
    divideWidth: false,
    divideColor: false,
    divideOpacity: false,
    // 涉及到通配符（*），wx 小程序不支持
    ringWidth: false,
    ringColor: false,
    ringOpacity: false,
    ringOffsetWidth: false,
    ringOffsetColor: false,
    // web 浏览器相关功能，wx 小程序不支持
    appearance: false,
    cursor: false,
    outline: false,
    placeholderColor: false,
    pointerEvents: false,
    stroke: false,
    tableLayout: false,
    userSelect: false
  },
  theme: {
    flex: {
      1: '1 1 0%',
      auto: '1 1 auto',
      initial: '0 1 auto',
      inherit: 'inherit',
      none: 'none',
      2: '2 2 0%',
      3: '3 3 0%',
      4: '4 4 0%',
      5: '5 5 0%',
      6: '6 6 0%',
      7: '7 7 0%',
      8: '8 8 0%',
      9: '9 9 0%',
      10: '10 10 0%',
      11: '11 11 0%',
      12: '12 12 0%'
    },
    spacing: {
      ...generateSpacing(999),
      ...range(24)
    },
    colors: {
      transparent: 'transparent',
      white: '#ffffff',
      black: '#2E3547',

      LH: '#0061AE',
      primary: '#0F8AF9',
      primary_half: '#59abff',

      success: '#1DC79C',
      warning: '#FFD314',
      danger: '#F86A6B',
      info: '#A4A4A4',
      info_text: '#8c8c8c',
      info_unInput: '#b2bbc1',

      border: '#f0f0f0',

      x_line: '#f0f0f0',
      xx_line: '#f8f8f8',

      x_bg: '#F1F4F6',
      xx_bg: '#f9f9f9',
      xxx_bg: '#f4f4f4',
      xxxx_bg: '#E5ECF5',

      x_text: '#595959',
      xx_text: '#8C8C8C',
      xxx_text: '#BFBFBF',

      formItemRequire: '#F86A6B'
    },
    fontSize: theme => theme('spacing'),
    borderWidth: theme => theme('spacing'),
    lineHeight: theme => theme('spacing'),
    translate: theme => theme('spacing'),
    inset: theme => theme('spacing'),
    rotate: {
      ...generateRotate(360)
    },
    borderRadius: theme => {
      return {
        ...theme('spacing'),
        full: '999px',
        card: '12px'
      }
    },
    width: theme => ({
      auto: 'auto',
      full: '100%',
      screen: '100vw',
      ...theme('spacing')
    }),
    maxWidth: theme => ({
      auto: 'auto',
      full: '100%',
      screen: '100vw',
      ...theme('spacing')
    }),
    minWidth: theme => {
      console.log(theme('spacing'))
      return {
        auto: 'auto',
        full: '100%',
        screen: '100vw',
        ...theme('spacing')
      }
    },
    height: theme => ({
      auto: 'auto',
      full: '100%',
      screen: '100vh',
      ...theme('spacing')
    }),
    minHeight: theme => ({
      auto: 'auto',
      full: '100%',
      screen: '100vh',
      ...theme('spacing')
    }),
    maxHeight: theme => ({
      auto: 'auto',
      full: '100%',
      screen: '100vh',
      ...theme('spacing')
    })
  }
}
